import React, {useState, useEffect} from 'react';
import {Form} from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {Select, Row, Col, Button, Table, message} from 'antd';
import {DndProvider} from 'react-dnd';
import {HTML5Backend} from 'react-dnd-html5-backend';
import process from 'immer';
import '../../css/page/SelfConfig';
import {CORE_PAGE_ID} from '~/utils/const';
import {getBizReference, saveSortReference} from '~/service/performance';
import DragableBodyRow from '../../component/DragableBodyRow';
import popUpContainer from './popupFix';
import Edit from './edit';
import AddPath from './addPath';

const {Option} = Select;

const components = {
    body: {
        row: DragableBodyRow,
    },
};

/**
 * @Creator: andycao(caohuayu@baijia.com)
 * @Date: 2020/05/25
 * 核心页面配置页面
 */
function SelfConfig() {
    const [pageId, setPageId] = useState(`${CORE_PAGE_ID}`);
    const [list, setList] = useState([]);
    const [editModal, setEditModal] = useState(false);
    const [editBizId, setEditBizId] = useState();
    const [showAddModal, setAddPathModal] = useState(false);

    const columns = [
        {
            title: '序号',
            dataIndex: 'bizId',
            key: 'bizId',
            render: (val, record, index) => (index + 1)
        },
        {
            title: '业务线',
            dataIndex: 'bizTypeName',
            key: 'bizTypeName',
        },
        {
            title: '应用',
            dataIndex: 'bizName',
            key: 'bizName',
        },
        {
            title: '应用内指标',
            dataIndex: 'bizId',
            key: 'operation',
            align: 'center',
            render: bizId => (
                <Button onClick={openEdit(bizId)}>编辑</Button>
            )
        }
    ];

    function openEdit(id) {
        return () => {
            setEditModal(true);
            setEditBizId(id);
        };
    }

    function closeModal(refreshList) {
        if (refreshList) {
            getList();
        }
        setEditModal(false);
        setAddPathModal(false);
    }

    function openAdd() {
        setAddPathModal(true);
    }

    function handleChange(id) {
        setPageId(id);
    }

    function getList() {
        getBizReference({pageId}).then(res => {
            if (res.code === 0) {
                setList(res.data.bizPreferences);
            }
            else {
                message.error(res.msg);
            }
        });
    }

    // handle move event, produce new list
    function moveRow(dragIndex, hoverIndex) {
        const nextList = process(list, draft => {
            const move = draft.splice(dragIndex, 1)[0];
            draft.splice(hoverIndex, 0, move);
        });
        saveListOrder(nextList);
    }

    function saveListOrder(list) {
        const params = {
            pageId,
            bizIdList: list.map(entry => entry.bizId)
        };
        saveSortReference(params).then(res => {
            if (res.code === 0) {
                setList(res.data.bizPreferences);
            }
            else {
                message.error(res.msg);
            }
        });
    }

    useEffect(() => {
        getList();
    }, [pageId]);

    return (
        <div className="selfConfig">
            <Form layout="inline">
                <Form.Item
                    key="pageSelect"
                    label="配置页面"
                    labelAlign="right"
                >
                    <Select
                        defaultValue={pageId}
                        style={{width: 180}}
                        onChange={handleChange}
                        getPopupContainer={popUpContainer}
                    >
                        <Option value="180">高途核心页面性能监控</Option>
                    </Select>
                </Form.Item>
            </Form>
            <Row className="funcLine">
                <Col span={4}>
                    <h3>监控指标配置</h3>
                </Col>
                <Col span={4} offset={16} className="btnRight">
                    <Button type="primary" onClick={openAdd}>添加监控</Button>
                </Col>
            </Row>
            <p>
                按照序号在监控页面从上往下排序，可拖动表格进行调整
            </p>
            <DndProvider backend={HTML5Backend}>
                <Table
                    rowClassName="drag-sort-row"
                    dataSource={list}
                    columns={columns}
                    rowKey="bizId"
                    components={components}
                    // eslint-disable-next-line react/jsx-no-bind
                    onRow={(_record, index) => ({
                        index,
                        moveRow
                    })}
                    pagination={false}
                />
            </DndProvider>
            <Edit visible={editModal} handleOk={closeModal} bizId={editBizId} />
            <AddPath visible={showAddModal} handleOk={closeModal} pageId={pageId} />
        </div>
    );
}

export default SelfConfig;
